<template>
  <section class="sale-detail">
    <div class="detail-left">
      <img :src="productIcon">
      <ul>
        <router-link v-for="item in products" :to="{path : item.url}" tag="li" active-class="active">
          {{item.name}}
        </router-link>
      </ul>
    </div>
    <div class="detail-right">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </section>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  //引入组件
  @Component
  export default class Detail extends Vue {
    // 全部产品
    products = [{
        name : '数据统计',
        url : '/detail/analysis'
      },{
        name : '数据预测',
        url : '/detail/forecast'
      },{
        name : '流量分析',
        url : '/detail/count'
      },{
        name : '广告发布',
        url : '/detail/publish'
      }]

      //菜单图标
      imgMap = {
        "/detail/analysis" : '../../static/assets/Icon1.png',
        "/detail/forecast" : '../../static/assets/Icon2.png',
        "/detail/count" : '../../static/assets/Icon3.png',
        "/detail/publish" : '../../static/assets/Icon4.png'
      }

      //computed  计算属性
      //产品图片
      get productIcon () {
        return this.imgMap[this.$route.path]
      }
  }
</script>

<style lang="scss">
  .sale-detail {
    width: 100%;
    min-height:750px;
    font-size: 14px;
    font-family: 微软雅黑;
    margin: 1% auto;
    display: flex;
    flex-direction: row;

    .detail-left {
      width: 14%;
      height:100%;
      margin-right: 1%;
      background: #fff;
      display: flex;
      flex-direction: column;

      img {
        width:40%;
        height:40%;
        margin:25px auto;
      }

      ul {
        list-style: none;
        margin-bottom:20px;

        li {
          padding:10px 30px;
        }

        .active {
          color: #fff;
          background: #4fc08d;
        }
      }
    }

    .detail-right {
      width: 85%;

      .sales-board {
        background: #fff;
      }
      .sales-board-intro {
        h2 {
          font-size: 20px;
          padding: 20px;
        }

        p {
          background: #f7fcff;
          padding: 10px 20px;
          color: #999;
          line-height: 1.8;
        }
      }
      .sales-board-form {
        padding: 30px 20px;
        font-size: 14px;
      }
      .sales-board-line {
        clear: both;
        padding-bottom: 20px;
      }
      .sales-board-line-left {
        display: inline-block;
        width: 100px;
      }
      .sales-board-line-right {
        display: inline-block;
        width: 75%;

        .btn {
          font-size: 14px;
          display: inline-block;
          white-space: nowrap;
          cursor: pointer;
          background: #fff;
          border: 1px solid #c4c4c4;
          padding: 10px 15px;
          border-radius: 4px;
          text-decoration: none;
        }

        .btn-submit {
          color: #fff;
          background-color: #4fc08d;
          border-color: #4fc08d;
        }
      }
      .sales-board-des {
        border-top: 20px solid #f0f2f5;
        padding: 15px 20px;

        p {
          line-height: 2;
        }

        h2 {
          font-size: 20px;
          padding-bottom: 15px;
        }

        h3 {
          font-size: 18px;
          font-weight: bold;
          padding: 20px 0 10px 0;
        }

        ul {
          list-style: none;
          li {
            padding: 8px 0;
          }
        }
      }
      .sales-board-table {
        width: 100%;
        margin-top: 20px;

        th {
          background: #4fc08d;
          color: #fff;
        }

        td {
          border: 1px solid #f0f2f5;
          padding: 15px;
        }
      }
    }
  }
</style>
